<template>
  <div class="tableWrapper">
    <div class="title">中压注册线段</div>
    <div class="operate">
      <el-row>
        <el-col :span="18">
          <el-button size="mini" type="primary" @click="handleXlhz">线路汇总</el-button>
          <el-button size="mini" type="primary" @click="handleAdd">新增</el-button>
          <el-button size="mini" type="primary" @click="handleXdsplit">线段拆分</el-button>
          <el-button size="mini" type="primary" @click="handleChange">线段变更</el-button>
          <el-button size="mini" type="primary" @click="handleChangeDw">更换单位</el-button>
          <el-button size="mini" type="primary" @click="handleRetire">线段退役</el-button>
          <el-button size="mini" type="primary" @click="handleRecover">注销取消</el-button>
        </el-col>
        <el-col :span="6" class="right">
          <el-button 
            size="mini" 
            type="primary"
            @click="cccEvent('show', zczyXdsjColumnTable)"
          >列配置</el-button>
          <el-button 
            size="mini" 
            type="primary"
            @click="cccEvent('export', zczyXdsjColumnTable)"
          >导出</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="formWrapper">
      <el-form :inline="true" :model="formInline" class="xdbm">
        <el-form-item label="线段编码/名称">
          <el-input size="mini" v-model="formInline.xdbmmc"></el-input>
        </el-form-item>
        <el-form-item label="注册日期" class="zcrq">
            <el-date-picker size="mini" type="date" v-model="formInline.qszcrq" :picker-options="pickerStartDate" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
            <span>至</span>
            <el-date-picker size="mini" type="date" v-model="formInline.zzzcrq" :picker-options="pickerEndDate" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
        </el-form-item>
        <el-form-item label="地区特征" class="dqtz">
          <el-select size="mini" v-model="dqtzm" placeholder="请选择">
            <el-option v-for="item in dqtzOptions" :key="item.value" :label="item.text" :value="item.value">
              <span class="txt">{{ item.text }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="投运状态"  class="tyzt">
          <el-select size="mini" v-model="formInline.tyzt" placeholder="请选择">
            <el-option v-for="item in tyztOptions" :key="item.value" :label="item.text" :value="item.value">
              <span class="txt">{{ item.text }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="btn">
          <el-button size="mini" type="primary" @click="handleSearch">查询</el-button>
          <el-button size="mini" type="primary" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table">
      <el-table :data="tableData" ref="tableData" border style="width: 100%;" height="100%" v-loading="loading" @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          fixed="left"
          align="center"
          width="55">
        </el-table-column>
        <template v-for="col in zczyXdsjColumnData">
          <el-table-column
            :show-overflow-tooltip="true"
            :key="col.id"
            :prop="col.field"
            :label="col.title"
            :min-width="col.minWidth"
            :align="col.align"
            :header-align="col.align"
            :sortable="col.sortable"
            :formatter="col.formatter"
            :fixed="col.fixed"
          ></el-table-column>
        </template>
        <el-table-column align="center" fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button :disabled="canEdit(scope.row.zxrq, scope.row.tcrq)" size="mini" type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)"></el-button>
            <el-button size="mini" type="danger" icon="el-icon-delete" @click="handleDelete(scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="formInline.current" :page-size="formInline.size" :page-sizes="[10, 20, 40, 80]" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

    <!-- 中压注册线段新增 -->
    <zczyXdAdd :propAddData="propAddData" @updateZczyXdTable="updateZczyXdTable"></zczyXdAdd>

    <!-- 中压注册线段编辑 -->
    <zczyXdEdit :propEditData="propEditData" @updateZczyXdTable="updateZczyXdTable"></zczyXdEdit>

    <!-- 中压注册线段退役 -->
    <zczyXdRetire :propRetireData="propRetireData" @updateZczyXdTable="updateZczyXdTable"></zczyXdRetire>

    <!-- 中压注册线段更换单位 -->
    <zczyXdChangeDw :propChangeDwData="propChangeDwData" @updateZczyXdTable="updateZczyXdTable"></zczyXdChangeDw>

    <!-- 中压注册线段变更 -->
    <zczyXdChange :propChangeData="propChangeData" @updateZczyXdTable="updateZczyXdTable"></zczyXdChange>

    <!-- 中压注册线段拆分 -->
    <zczyXdsplit :propXdsplitData="propXdsplitData" :zczyColumnCf="zczyXdsjColumnData"></zczyXdsplit>


    <!-- 列配置 -->
    <ccc ref="ccc"></ccc>	
  </div>
</template>

<script>
import { dataModulePrefix } from '../../../../config';
import { getZczyTable, deleteZczyXd, recoverZczyXd } from '@/api/sjwh/zczy.js';
import ccc from "@/dialogCommom/ccc";
import zczyXdAdd from './zczyXdAdd.vue';
import zczyXdEdit from './zczyXdEdit.vue';
import zczyXdRetire from './zczyXdRetire.vue';
import zczyXdChangeDw from './zczyXdChangeDw.vue';
import zczyXdChange from './zczyXdChange.vue';
import zczyXdsplit from "./zczyXdsplit";
import { getDictCombo } from '@/api/tools/dict.js';
export default {
  data() {
    return {
      formInline: {
        dwbm: [], // 单位编码数组
        xdbmLike: '',
        xdbmmc: '', // 线段编码/名称
        qszcrq: '', // 注册起始日期
        zzzcrq: '', // 注册结束日期
        dqtzm: [], // 地区特征
        tyzt: '1', // 投运状态
        current: 1, // 当前页数
        size: 10 // 每页显示数据条数
      },
      pickerStartDate: { // 注册起始时间选择
          disabledDate: time => {
              if (this.formInline.zzzcrq) {
                return (
                  time.getTime() + 3600 * 1000 * 24 > new Date(this.formInline.zzzcrq)
                );
              }
          }
      },
      pickerEndDate: { // 注册终止时间选择
          disabledDate: time => {
              if (this.formInline.qszcrq) {
                  return (
                    time.getTime() < new Date(this.formInline.qszcrq)
                  );
              }
          }
      },
      dqtzm: '', // 选择的地区特征码
      total: 0, // 数据总条数
      loading: false,
      tableData: [],
      zczyXdsjColumnTable: 'zc_zyxdsj', // 中压注册线段列配置参数
      zczyXdsjColumnData: [], //中压注册线段表格列数据
      multipleSelection: [], // 选中的数据
      dqtzDict: 'dict_dqtz', // 地区特征字典分类值
      tyztDict: 'dict_tyzt', // 投运状态字典分类值
      dqtzOptions: [], // 地区特征下拉框数据
      tyztOptions: [], // 投运状态下拉框数据
      propAddData: { // 传给【中压注册线段新增】组件的值
        show: false,
        dwbm: '',
        dwmc: '',
        dwxz: '',
        dwxzm: '',
        xdbm: ''
      },
      propEditData: { // 传给【中压注册线段编辑】组件的值
        show: false,
        id: ''
      },
      propRetireData: { // 传给【线段退役】组件的值
        show: false,
        dwbm: '',
        id: '',
        czy: '',
        xdmc: '',
        xdbm: '',
        zcrq: ''
      },
      propChangeDwData: { // 传给【线段变更单位】组件的值
        show: false,
        dwbm: '',
        dwmc: '',
        id: '',
        czy: '',
        cxkg: '',
        xdbm: '',
        zcrq: '',
        len: 0
      },
      propChangeData: { // 传给【线段变更】组件的值
        show: false,
        obj: null
      },
      propXdsplitData: { // 传给 【线段拆分】组件的值
        dialogVisible: false,
        xdRow: {}
      }
    }
  },
  components: {
    ccc,
    zczyXdAdd,
    zczyXdEdit,
    zczyXdRetire,
    zczyXdChangeDw,
    zczyXdChange,
    zczyXdsplit
  },
  props: {
    propData: {
      type: Object,
      default: function() {
        return {};
      }
    }
  },
  computed: {
    canEdit() {
      return function(zxrq, tcrq){
        if (zxrq || tcrq) {
          return true
        } else {
          return false
        }         
      }
    }
  },
  watch: {
    propData: {
      deep: true,
      immediate: true,
      handler(newVal, oldVal) {
        const that = this
        let treeNode = JSON.parse(sessionStorage.getItem('treeNode'))
        that.formInline.dwbm = [treeNode.dwbm]
        if (newVal.xdbm) {
          that.formInline.xdbmLike = newVal.xdbm
          that.propAddData.xdbm = newVal.xdbm
        } else {
          that.formInline.xdbmLike = ''
          that.propAddData.xdbm = ''
          if (newVal.showZxxd) { 
            if (newVal.showAllTyzt) {
              that.formInline.tyzt = '0'
            } else {
              that.formInline.tyzt = '1'
            }
          }
        }
        that.propAddData.show = false
        that.getZczyTable()
      }
    }
  },
  created() {
    const that = this
    that.cccEvent("load", that.zczyXdsjColumnTable)
    let pam1 = {
      typeCode: that.dqtzDict
    }
    let pam2 = {
      typeCode: that.tyztDict
    }
    let res1 = getDictCombo(pam1)
    let res2 = getDictCombo(pam2)
    Promise.all([res1, res2]).then(result => {
      that.dqtzOptions = result[0].data
      that.tyztOptions = result[1].data
      that.dqtzOptions.unshift({'text': '全部', 'value': ''})
      that.tyztOptions.unshift({'text': '全部', 'value': '0'})
    }).catch(reason => {
      console.log(reason)
    })
    let treeNode = JSON.parse(sessionStorage.getItem('treeNode'))
    that.propAddData = {
      show: false,
      dwbm: treeNode.dwbm,
      dwmc: treeNode.dwmc,
      dwxz: treeNode.dwxz,
      dwxzm: treeNode.dwxzm,
      xdbm: ''
    }
  },
  beforeUpdate () { 
    //解决列配置引发的滚动条问题
    this.$nextTick(()=>{
      this.$refs.tableData.doLayout()
    }) 
  },
  methods: {
    /**线段拆分 */
    handleXdsplit(){
      console.log('线段拆分');
      const that = this;
      if(that.multipleSelection.length <= 0 || that.multipleSelection.length > 1){
        this.$message.warning("请选择一条线段机型操作！")
        return false;
      }
      let selectData = that.multipleSelection;
      this.propXdsplitData = JSON.parse(JSON.stringify({
        dialogVisible: true,
        xdRow: selectData
      }))
    },

    /* 查询 */
    handleSearch() {
      const that = this
      that.getZczyTable()
    },

    /* 查询 */
    handleReset() {
      const that = this
      that.formInline.xdbmmc = ''
      that.formInline.qszcrq = ''
      that.formInline.zzzcrq = ''
      that.formInline.dqtzm = []
      that.formInline.tyzt = '1'
      that.formInline.current = 1
      that.formInline.size = 10
      that.getZczyTable()
    },

    // 选择事件
    handleSelectionChange(val) {
      this.multipleSelection = val
    },

    /* 获取中压注册数据列表 */
    getZczyTable() {
      const that = this
      that.loading = true
      if (that.dqtzm) {
        that.formInline.dqtzm = [that.dqtzm]
      }
      getZczyTable(that.formInline).then(res => {
        if (res.code == 0) {
          that.tableData = res.data.records
          that.total = res.data.total
        } else {
          that.$message.error(res.message)
        }
        that.loading =  false
      })
    },

    /* 更改每页数据条数 */
    handleSizeChange(val) {
      const that = this
      that.formInline.size = val
      that.getZczyTable()
    },

    /* 更改页码 */
    handleCurrentChange(val) {
      const that = this
      that.formInline.current = val
      that.getZczyTable()
    },

    /* 新增 */
    handleAdd() {
      const that = this
      let propAddData = that.propAddData
      propAddData.show = true
      that.propAddData = JSON.parse(JSON.stringify(propAddData))
    },

    /* 编辑 */
    handleEdit(row) {
      const that = this
      let propEditData = {
        show: true,
        id: row.id
      }
      that.propEditData = JSON.parse(JSON.stringify(propEditData))
    },

    /* 删除 */
    handleDelete(row) {
      const that = this
      that.$confirm('此操作将永久删除该线段, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let len = that.tableData.length
        let deleteObj = {
          czy: row.czy,
          ids: [row.id],
          zcZyyhsjValidZyyhExistsVO: {
            dwbm: row.dwbm,
            xdId: [row.id]
          },
          yxZytdxdValidYxXdExistsVO: {
            dwbm: row.dwbm,
            xdId: [row.id]
          }
        }
        /* 退役或者注销的线段：有运行事件时不能删除，无运行事件时可删除 */
        deleteZczyXd(deleteObj).then(res => {
          if (res.code == 0 && res.data) {
            if (len > 1) {
              that.updateZczyXdTable('updateSelf')
            } else {
              that.updateZczyXdTable('updateParent')
            }
            that.$message.success('删除成功')
          } else {
            that.$message.error(res.message)
          }
        })
      }).catch(() => {
        console.log('取消删除')          
      });
    },

    /* 新增组件和编辑组件回传更新列表 */
    updateZczyXdTable(val) {
      this.getZczyTable()
      this.$emit("updateZczyXdTree", val)
    },

    /* 线段退役 */
    handleRetire() {
      const that = this
      if (that.multipleSelection.length < 1) {
        that.$message.warning('请选择一条线段进行操作')
        return false
      }
      if (that.multipleSelection.length > 1) {
        that.$message.warning('只能选择一条线段进行操作')
        return false
      }
      if (that.multipleSelection[0].tcrq) {
        that.$message.warning('该线段已退役')
        return false
      }
      let propRetireData = {
        show: true,
        dwbm: that.multipleSelection[0].dwbm,
        id: that.multipleSelection[0].id,
        czy: that.multipleSelection[0].czy,
        xdmc: that.multipleSelection[0].xdmc,
        xdbm: that.multipleSelection[0].xdbm,
        zcrq: that.multipleSelection[0].zcrq
      }
      that.propRetireData = JSON.parse(JSON.stringify(propRetireData))
    },

    /* 注销取消 */
    handleRecover() {
      const that = this
      if (that.multipleSelection.length < 1) {
        that.$message.warning('请选择一条线段进行操作')
        return false
      }
      if (that.multipleSelection.length > 1) {
        that.$message.warning('只能选择一条线段进行操作')
        return false
      }
      if (that.multipleSelection[0].tcrq) {
        that.$message.warning('该线段已退役')
        return false
      }
      if (!that.multipleSelection[0].zxrq) {
        that.$message.warning('请选择一条已注销线段进行操作')
        return false
      }
      that.$confirm('此操作将取消注销该线段, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let recoverObj = {
          czy: that.multipleSelection[0].czy,
          id: that.multipleSelection[0].id,
          zcZyxdsjValidCxkgVO: {
            cxkg: that.multipleSelection[0].cxkg,
            dwbm: that.multipleSelection[0].dwbm,
            oid: that.multipleSelection[0].id,
            xdbm: that.multipleSelection[0].xdbm
          },
          zcZyxdsjValidXdbmmcExistsVO: {
            dwbm: that.multipleSelection[0].dwbm,
            oid: that.multipleSelection[0].id,
            xdbm: that.multipleSelection[0].xdbm,
            zcrq: that.multipleSelection[0].zcrq
          }
        }
        recoverZczyXd(recoverObj).then(res => {
          if (res.code == 0 && res.data) {
            that.$message.success('注销取消成功')
            that.getZczyTable()
          } else {
            that.$message.warning(res.message)
          }
        })
      }).catch(() => {
        console.log('已取消删除')          
      })
    },

    /* 线段变更单位 */
    handleChangeDw() {
      const that = this
      if (that.multipleSelection.length < 1) {
        that.$message.warning('请选择一条线段进行操作')
        return false
      }
      if (that.multipleSelection.length > 1) {
        that.$message.warning('只能选择一条线段进行操作')
        return false
      }
      if (that.multipleSelection[0].tcrq) {
        that.$message.warning('该线段已退役，不能变更单位')
        return false
      }
      if (that.multipleSelection[0].zxrq) {
        that.$message.warning('该线段已注销，不能变更单位')
        return false
      }
      let len = that.tableData.length    
      let propChangeDwData = {
        show: true,
        dwbm: that.multipleSelection[0].dwbm,
        dwmc: that.multipleSelection[0].dwmc,
        id: that.multipleSelection[0].id,
        czy: that.multipleSelection[0].czy,
        cxkg: that.multipleSelection[0].cxkg,
        xdbm: that.multipleSelection[0].xdbm,
        zcrq: that.multipleSelection[0].zcrq,
        len
      }
      that.propChangeDwData = JSON.parse(JSON.stringify(propChangeDwData))
    },

    /* 线段变更 */
    handleChange() {
      const that = this
      if (that.multipleSelection.length < 1) {
        that.$message.warning('请选择一条线段进行操作')
        return false
      }
      if (that.multipleSelection.length > 1) {
        that.$message.warning('只能选择一条线段进行操作')
        return false
      }
      if (that.multipleSelection[0].tcrq) {
        that.$message.warning('该线段已退役，不能变更')
        return false
      }
      if (that.multipleSelection[0].zxrq) {
        that.$message.warning('该线段已注销，不能变更')
        return false
      }
      let propChangeData = {
        show: true,
        obj: that.multipleSelection[0]
      }
      that.propChangeData = JSON.parse(JSON.stringify(propChangeData))
    },

    /* 切换线路汇总 */
    handleXlhz() {
      const that = this
      let obj = null
      if (that.formInline.xdbmLike) {
        obj = {
          isly: true,
          dwbm: that.formInline.dwbm[0],
          xdbm: that.formInline.xdbmLike
        }
      } else {
        obj = {
          isly: false,
          dwbm: that.formInline.dwbm[0],
          xdbm: ''
        }
      }
      that.$emit("updateZczyXlhz", obj)
    },

    //列配置
    cccEvent(method, table) {
      if (method === "show") {
        this.$refs.ccc.show(table);
      } else if (method === "load") {
        new Promise((resolve, reject) => {
          this.$nextTick(() => {
            resolve(this.$refs.ccc.load(table));
          });
        }).then(response => {
          this.zczyXdsjColumnData = response;
        });
      } else if (method === "export") {
        let vo = {
          tableCode: table,
          param: this.searchForm,
          url: `${dataModulePrefix}/zc-zyxdsj/page`,
          method: "POST",
          fileName: '中压注册线段',
          total: this.total
        };
        this.$refs.ccc.exportExcel(vo);
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.tableWrapper {
  height: 100%;
}
.title {
  font-size: 18px;
  height: 20px;
  line-height: 20px;
  margin-bottom: 8px;
}
.operate {
  margin-bottom: 10px;
}
.operate /deep/ .el-input {
  width: 120px;
}
.operate /deep/ .el-button+.el-button {
  margin-left: 0;
}
.operate .right {
  text-align: right;
}
.formWrapper {
  margin-bottom: 10px;
}
.formWrapper .xdbm /deep/ .el-input {
  width: 100px;
}
.formWrapper .zcrq /deep/ .el-input {
  width: 130px !important;
}
.formWrapper .dqtz /deep/ .el-input {
  width: 90px;
}
.formWrapper .tyzt /deep/ .el-input {
  width: 90px;
}
.formWrapper /deep/ .el-button+.el-button {
  margin-left: 2px;
}
.formWrapper /deep/ .el-form--inline .el-form-item {
  margin-bottom: 0;
  margin-right: 5px;
}
.formWrapper .btn /deep/ .el-form--inline .el-form-item {
  margin-right: 0;
}
.table {
  width: 100%;
  height: calc(100% - 155px);
  margin-bottom: 6px;
}
.pagination {
  text-align: center;
}
.txt {
  float: left;
}
.val {
  float: right;
  color: #8492a6;
  font-size: 13px;
}
</style>
